<template>
  <div>
    <!-- 企业管理  -->
    <el-button type="text" @click="dialogFormVisible = true"
      >打开嵌套表单的 Dialog</el-button
    >
    <el-dialog
      title="编辑从业人员信息"
      :visible.sync="dialogFormVisible"
      width="90%"
    >
      <div class="form-con">
        <div class="formleft">
          <el-form :model="form">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-input v-model="form.sex" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
              <el-input v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="出生年月" :label-width="formLabelWidth">
              <el-date-picker v-model="form.time" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="身份证" :label-width="formLabelWidth">
              <el-input v-model="form.idcard"></el-input>
            </el-form-item>
            <el-form-item label="学历" :label-width="formLabelWidth">
              <el-select v-model="form.record" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option> </el-select
            ></el-form-item>
            <el-form-item label="从业时间" :label-width="formLabelWidth">
              <el-date-picker v-model="form.time2" placeholder="选择日期">
              </el-date-picker
            ></el-form-item>
          </el-form>
        </div>
        <div class="formright">
          <el-form ref="ruleForm" class="demo-ruleForm">
            <div
              class="binding-item"
              v-for="(item, index) in batchForm"
              :key="index"
            >
              <el-form-item
                label="设备编号："
                label-width="90px"
                style="margin-right: 10px"
              >
                <el-input
                  v-model="item.value"
                  placeholder="请输入设备起始编号"
                ></el-input>
              </el-form-item>
              <el-form-item
                label-width="10px"
                v-if="item.name != '' && item.value !== ''"
              >
                <span
                  class="el-icon-close binding-button-close"
                  @click="batchDel(index)"
                ></span>
              </el-form-item>
              <el-form-item
                label-width="10px"
                v-if="batchForm[index].index == batchFormNum"
              >
                <span
                  class="el-icon-plus binding-button-plus"
                  @click="
                    batchAdd(index, batchForm[batchForm.length - 1].index)
                  "
                ></span>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      batchForm: [
        {
          name: "",
          value: "",
          index: 0,
        },
      ],
      batchFormNum: 0,
      dialogFormVisible: false,
      form: {
        time2: "",
        time: "",
        sex: "",
        age: "",
        name: "",
        idcard: "",
        record: "",
      },
      formLabelWidth: "120px",
    };
  },

  mounted() {},

  methods: {
    batchAdd(index, length) {
      if (this.batchForm[index].value !== "") {
        this.batchForm.push({ name: "", value: "", index: length + 1 });
        this.batchFormNum = length + 1;
      } else {
        this.$message.error("输入框不能为空");
      }
    },
    //动态删除批量绑定数据
    batchDel(index) {
      if (this.batchForm.length <= 1) {
        this.batchForm[index].value = "";
        this.batchForm[index].index = 0;
        this.batchFormNum = 0;
      } else {
        //先删除当前下标的数据
        this.batchForm.splice(index, 1);
        let num = [];
        //循环找出所有下标,不找出最大值，不根据顺序删除会报错
        this.batchForm.forEach((item) => {
          num.push(item.index);
        });
        //查出数组中最大值，赋值给batchFormNum
        this.batchFormNum = Math.max(...num);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.form-con {
  width: 100%;
  display: flex;
}
.formleft {
  flex: 1;
}
.formright {
  flex: 1;
}
.binding-item {
  display: flex;
}
.demo-ruleForm {
  width: 45%;
}
</style>
